<template>
  <view class="detail-content-card detail-card ss-p-30" v-if="content">
    <view class="detail-content-title ss-m-b-20">教练详情</view>
    <view class="detail-content">
      <rich-text :nodes="content"></rich-text>
    </view>
  </view>
</template>

<script setup>
  defineProps({
    content: {
      type: String,
      default: '',
    },
  });
</script>

<style lang="scss" scoped>
  .detail-content-card {
    .detail-content-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
      }
    }

    .detail-content {
      font-size: 28rpx;
      line-height: 1.8;
      color: #666;
      word-break: break-all;
    }
  }
</style>
